<template>
  <el-container class="order-view panel-block">
    <el-header class="sa-header">
      <div class="sa-title sa-flex sa-row-between">
        <div class="label sa-flex">
          <span class="left">分销订单</span>
          <search-condition
            :conditionLabel="filterParams.conditionLabel"
            @deleteFilter="deleteFilter"
          ></search-condition>
        </div>
        <div>
          <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
          <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
          <el-button
            v-auth="'shop.admin.commission.order.export'"
            :loading="exportLoading"
            :disabled="exportLoading"
            @click="onExport"
            >订单导出</el-button
          >
        </div>
      </div>
      <el-row class="dashboard-content sa-m-t-8 sa-m-b-16" :gutter="0">
        <el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4">
          <el-row :gutter="0">
            <el-col class="item" :xs="8" :sm="8" :md="24" :lg="24" :xl="24">
              <div class="content"> {{ state.count.total }}<span class="unit">单</span> </div>
              <div class="label">商品总订单数</div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20">
          <el-row :gutter="0">
            <el-col class="item" :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
              <div class="content">
                {{ state.count.total_amount?.toFixed(2) }}<span class="unit">元</span>
              </div>
              <div class="label">商品结算总金额</div>
            </el-col>
            <el-col class="item" :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
              <div class="content">
                {{ state.count.total_commission?.toFixed(2) }}<span class="unit">元</span>
              </div>
              <div class="label">分佣总金额</div>
            </el-col>
            <el-col class="item" :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
              <div class="content">
                {{ state.count.total_commission_cancel?.toFixed(2) }}<span class="unit">元</span>
              </div>
              <div class="label">已取消佣金</div>
            </el-col>
            <el-col class="item" :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
              <div class="content">
                {{ state.count.total_commission_back?.toFixed(2) }}<span class="unit">元</span>
              </div>
              <div class="label">已退回佣金</div>
            </el-col>
            <el-col class="item" :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
              <div class="content">
                {{ state.count.total_commission_pending?.toFixed(2) }}<span class="unit">元</span>
              </div>
              <div class="label">未结算佣金</div>
            </el-col>
            <el-col class="item" :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
              <div class="content">
                {{ state.count.total_commission_accounted?.toFixed(2) }}<span class="unit">元</span>
              </div>
              <div class="label">已结算佣金</div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-header>
    <el-main class="sa-p-0" v-loading="state.loading">
      <div class="sa-table-contnet">
        <el-table
          height="100%"
          class="sa-table"
          :data="state.tableData"
          :span-method="arraySpanMethod"
          default-expand-all
        >
          <template #empty>
            <sa-empty />
          </template>
          <el-table-column type="expand">
            <template #default="props">
              <el-table class="sa-table sa-expand-table" :data="[props.row]">
                <el-table-column width="48" />
                <el-table-column min-width="300">
                  <template #default>
                    <div v-if="props.row.order_item">
                      <div class="goods-item sa-flex">
                        <sa-image :url="props.row.order_item.goods_image" size="58" />
                        <div class="right sa-m-l-12">
                          <div class="goods-title sa-flex sa-table-line-1">
                            <span
                              class="goods-id"
                              @click="onOpenGoodsEdit(props.row.order_item.goods_id)"
                              >#{{ props.row.order_item.goods_id }}</span
                            >
                            {{ props.row.order_item.goods_title }}
                          </div>
                          <div class="goods-sku-text sa-table-line-1">
                            <span v-if="props.row.order_item.goods_sku_text">{{
                              props.row.order_item.goods_sku_text
                            }}</span>
                          </div>
                          <div class="sa-flex">
                            <span class="goods-price sa-m-r-8"
                              >¥{{ props.row.order_item.goods_price }}</span
                            >
                            <span class="goods-num sa-m-r-12"
                              >x{{ props.row.order_item.goods_num }}</span
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                    <div v-else>{{ props.row.order_item }}</div>
                  </template>
                </el-table-column>
                <el-table-column min-width="100" align="center">
                  <template #default>
                    <span
                      :class="[
                        'refund-status',
                        `refund-status-${props.row.order_item?.refund_status}`,
                      ]"
                    >
                      {{ props.row.order_item?.refund_status_text || '-' }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column min-width="100" align="center">
                  <template #default>
                    <sa-user-profile :user="props.row.buyer" :id="props.row.buyer_id" mode="col" />
                  </template>
                </el-table-column>
                <el-table-column min-width="100" align="center">
                  <template #default>
                    <sa-user-profile :user="props.row.agent" :id="props.row.agent_id" mode="col" />
                  </template>
                </el-table-column>
                <el-table-column min-width="200" align="center">
                  <template #default>
                    <div class="sa-flex sa-row-center">
                      <div
                        class="rewards-item"
                        v-for="(rewards, index) in props.row.rewards"
                        :key="rewards"
                      >
                        <el-popover placement="top-start" :width="240" trigger="hover">
                          <div class="rewards-popover">
                            <div class="sa-m-b-12">
                              <div v-if="rewards.agent" class="sa-flex">
                                <sa-image
                                  :url="rewards.agent.avatar"
                                  size="32"
                                  radius="16"
                                ></sa-image>
                                <div class="sa-m-l-12">
                                  <div class="nickname sa-table-line-1">
                                    {{ rewards.agent.nickname }}
                                  </div>
                                  <div class="id">#{{ rewards.agent.id }}</div>
                                </div>
                              </div>
                              <div v-else>#{{ rewards.agent_id }}</div>
                            </div>
                            <div>用户等级：等级{{ rewards.agent_level }}</div>
                            <div> 用户层级：{{ rewards.commission_level }}级分销 </div>
                            <div>
                              比例/佣金：
                              <template v-if="rewards.commission_rules">
                                <template v-if="rewards.commission_rules.rate">
                                  {{ rewards.commission_rules.rate }}%
                                </template>
                                <template v-if="rewards.commission_rules.money">
                                  {{ rewards.commission_rules.money }}元
                                </template>
                              </template>
                            </div>
                            <div class="rewards-status sa-flex">
                              佣金状态：
                              <span :class="['status', `status-${rewards.status}`]">{{
                                rewards.status_text
                              }}</span>
                              <template v-if="rewards.status == 0">
                                <el-button
                                  v-auth="'shop.admin.commission.order.confirm'"
                                  class="is-link sa-m-l-8"
                                  type="primary"
                                  size="small"
                                  @click="
                                    onConfirm({
                                      commission_reward_id: rewards.id,
                                    })
                                  "
                                  >手动结算</el-button
                                >
                                <el-button
                                  v-auth="'shop.admin.commission.order.cancel'"
                                  class="is-link sa-m-l-8"
                                  type="info"
                                  size="small"
                                  @click="
                                    onCancel({
                                      commission_reward_id: rewards.id,
                                    })
                                  "
                                >
                                  取消
                                </el-button>
                              </template>
                              <el-popconfirm
                                width="fit-content"
                                confirm-button-text="确认"
                                cancel-button-text="取消"
                                title="确认?"
                                @confirm="
                                  onBack({
                                    commission_reward_id: rewards.id,
                                  })
                                "
                              >
                                <template #reference>
                                  <div class="sa-flex">
                                    <el-button
                                      v-if="rewards.status == 1"
                                      v-auth="'shop.admin.commission.order.back'"
                                      class="is-link sa-m-l-8"
                                      type="danger"
                                      size="small"
                                    >
                                      手动退回
                                    </el-button>
                                  </div>
                                </template>
                              </el-popconfirm>
                            </div>
                            <div>入账方式：{{ rewards.type_text }}</div>
                            <div class="sa-flex sa-col-top">
                              <span class="sa-flex-0">佣金金额：</span>
                              <div class="sa-flex sa-flex-wrap">
                                <template v-if="!commissionEdit.flag[index]">
                                  <span>{{ rewards.commission }}元</span>
                                  <el-button
                                    v-if="rewards.status == 0"
                                    v-auth="'shop.admin.commission.order.edit'"
                                    class="is-link"
                                    type="primary"
                                    size="small"
                                    @click="commissionEdit.flag[index] = true"
                                    >修改</el-button
                                  >
                                </template>
                                <template v-if="commissionEdit.flag[index]">
                                  <el-input
                                    class="sa-w-80"
                                    v-model="commissionEdit.commission"
                                    size="small"
                                  >
                                    <template #append>元</template>
                                  </el-input>
                                  <el-button
                                    class="is-link sa-m-l-4"
                                    type="info"
                                    size="small"
                                    @click="
                                      commissionEdit.flag[index] = false;
                                      commissionEdit.commission = '';
                                    "
                                    >取消</el-button
                                  >
                                  <el-button
                                    class="is-link sa-m-l-4"
                                    type="primary"
                                    size="small"
                                    @click="
                                      onEdit(index, {
                                        commission_reward_id: rewards.id,
                                        commission: commissionEdit.commission,
                                      })
                                    "
                                    >确定</el-button
                                  >
                                </template>
                                <s v-if="rewards.original_commission != rewards.commission">{{
                                  rewards.original_commission
                                }}</s>
                              </div>
                            </div>
                          </div>
                          <template #reference>
                            <div class="sa-flex sa-flex-col sa-row-center">
                              <template v-if="rewards.agent">
                                <sa-image
                                  :url="rewards.agent.avatar"
                                  size="32"
                                  radius="16"
                                ></sa-image>
                              </template>
                              <template v-if="!rewards.agent">
                                {{ rewards.agent_id }}
                              </template>
                              <div class="commission sa-m-t-6"> {{ rewards.commission }}元 </div>
                            </div>
                          </template>
                        </el-popover>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column min-width="80" align="center">
                  <template #default>
                    <!-- commission_reward_status -2=已退回|-1=已取消|0=未结算|1=已结算 -->
                    <span :class="`sa-color--${statusStyle[props.row.commission_reward_status]}`">
                      {{ props.row.commission_reward_status_text }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column min-width="172" align="center">
                  <template #default>
                    <div>{{ props.row.reward_event_text }}</div>
                    {{ props.row.commission_time }}
                  </template>
                </el-table-column>
                <el-table-column min-width="110" align="center">
                  <template #default>
                    <div>{{ props.row.reward_type_text }}</div>
                    {{ props.row.amount }}元
                  </template>
                </el-table-column>
                <el-table-column min-width="100" align="center">
                  <template #default>
                    <!-- commission_order_status -2=已扣除|-1=已取消|0=不计入|1=已计入 -->
                    <span :class="`sa-color--${statusStyle[props.row.commission_order_status]}`">
                      {{ props.row.commission_order_status_text }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column min-width="160" align="center">
                  <template #default>
                    {{ countRewards(props.row.rewards) }}
                  </template>
                </el-table-column>
                <el-table-column min-width="160">
                  <template #default>
                    <el-popover
                      v-model:visible="commissionPopover.flag[props.$index]"
                      placement="top-start"
                      :width="312"
                      trigger="click"
                    >
                      <div class="commission-popover">
                        <div class="title sa-flex">
                          <el-icon><QuestionFilled /></el-icon>
                          <template v-if="props.row.commission_reward_status == 0">
                            <template v-if="commissionPopover.type == 'confirm'">
                              手动提前结算，佣金将不再按结算方式自动执行。
                            </template>
                            <template v-if="commissionPopover.type == 'cancel'">
                              取消结算，佣金将不再结算。
                            </template>
                          </template>
                          <template v-if="props.row.commission_reward_status == 1">
                            您确定要手动退回佣金？
                          </template>
                        </div>
                        <div class="sa-flex sa-row-between">
                          <div>
                            <el-checkbox
                              v-if="
                                commissionPopover.type == 'back' ||
                                commissionPopover.type == 'cancel'
                              "
                              v-model="commissionPopover.isDelete"
                              true-label="1"
                              false-label="0"
                              >扣除推广分销商业绩</el-checkbox
                            >
                          </div>
                          <div>
                            <el-button
                              class="is-link"
                              type="info"
                              size="small"
                              @click="onCancelCommissionPopover(props.row.id, props.$index)"
                              >取消</el-button
                            >
                            <el-button
                              size="small"
                              type="primary"
                              @click="onConfirmCommissionPopover(props.row.id, props.$index)"
                              >确定</el-button
                            >
                          </div>
                        </div>
                      </div>
                      <template #reference>
                        <div class="sa-flex">
                          <template v-if="props.row.commission_reward_status == 0">
                            <el-button
                              v-auth="'shop.admin.commission.order.confirm'"
                              class="is-link"
                              type="primary"
                              @click="commissionPopover.type = 'confirm'"
                              >手动结算</el-button
                            >
                            <el-button
                              v-auth="'shop.admin.commission.order.cancel'"
                              class="is-link"
                              type="info"
                              @click="commissionPopover.type = 'cancel'"
                            >
                              取消结算
                            </el-button>
                          </template>
                          <el-button
                            v-auth="'shop.admin.commission.order.back'"
                            v-else-if="props.row.commission_reward_status == 1"
                            class="is-link"
                            type="danger"
                            @click="commissionPopover.type = 'back'"
                          >
                            手动退回
                          </el-button>
                        </div>
                      </template>
                    </el-popover>
                    <template v-if="props.row.commission_reward_status < 0">-</template>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="商品信息" min-width="300">
            <template #default="scope">
              <div class="order-content sa-flex">
                <div class="id">ID：{{ scope.row.id }}</div>
                <template v-if="scope.row.order">
                  <div class="order-sn sa-flex">
                    订单号：{{ scope.row.order.order_sn }}
                    <sa-svg
                      class="copy sa-m-l-4 cursor-pointer"
                      name="sa-copy"
                      @click="useClip(scope.row.order.order_sn)"
                    ></sa-svg>
                  </div>
                  <div>下单时间：{{ scope.row.order.create_time }}</div>
                  <div>订单状态：{{ scope.row.order.status_text }}</div>
                </template>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="退款状态" min-width="100" align="center"></el-table-column>
          <el-table-column label="下单用户" min-width="100" align="center"></el-table-column>
          <el-table-column label="推广分销商" min-width="100" align="center"></el-table-column>
          <el-table-column label="佣金详情" min-width="200" align="center"></el-table-column>
          <el-table-column label="佣金状态" min-width="80" align="center"></el-table-column>
          <el-table-column
            label="结算方式/结算时间"
            min-width="172"
            align="center"
          ></el-table-column>
          <el-table-column label="商品结算金额" min-width="110" align="center"> </el-table-column>
          <el-table-column label="分销商业绩" min-width="100" align="center"> </el-table-column>
          <el-table-column label="分销总金额/到账金额" min-width="160" align="center">
          </el-table-column>
          <el-table-column label="操作" min-width="160">
            <template #default="scope">
              <el-button
                class="is-link"
                type="primary"
                v-auth="'shop.admin.order.order.detail'"
                @click="onDetail(scope.row.order_id)"
                >订单详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
    <sa-view-bar>
      <template #right>
        <sa-pagination :pageData="pageData" @updateFn="getData" />
      </template>
    </sa-view-bar>
  </el-container>
</template>
<script>
  export default {
    name: 'shop.admin.commission.order',
  };
</script>
<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import { api } from '../commission.service';
  import { useModal, usePagination } from '@/sheep/hooks';
  import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
  import useClip from '@/sheep/utils/clipboard.js';
  import { composeFilter } from '@/sheep/utils';
  import OrderDetail from '@/app/shop/admin/order/order/detail.vue';
  import GoodsEdit from '@/app/shop/admin/goods/goods/edit.vue';
  import { cloneDeep } from 'lodash';

  const statusStyle = {
    '-2': 'danger',
    '-1': 'warning',
    0: 'info',
    1: 'success',
  };

  const filterParams = reactive({
    tools: {
      buyer: {
        type: 'tinputprepend',
        label: '下单用户',
        placeholder: '请输入查询内容',
        field: 'buyer',
        buyer: {
          field: 'buyer_id',
          value: '',
        },
        options: [
          {
            label: '用户ID',
            value: 'buyer_id',
          },
          {
            label: '用户昵称',
            value: 'buyer.nickname',
          },
          {
            label: '用户手机号',
            value: 'buyer.mobile',
          },
        ],
      },
      agent: {
        type: 'tinputprepend',
        label: '推广分销商',
        placeholder: '请输入查询内容',
        field: 'agent',
        agent: {
          field: 'agent_id',
          value: '',
        },
        options: [
          {
            label: '推广ID',
            value: 'agent_id',
          },
          {
            label: '推广昵称',
            value: 'agent.nickname',
          },
          {
            label: '推广手机号',
            value: 'agent.mobile',
          },
        ],
      },
      reward: {
        type: 'tinputprepend',
        label: '结算分销商',
        placeholder: '请输入查询内容',
        field: 'reward',
        reward: {
          field: 'reward.agent_id',
          value: '',
        },
        options: [
          {
            label: '结算ID',
            value: 'reward.agent_id',
          },
          {
            label: '结算昵称',
            value: 'reward.agent_nickname',
          },
          {
            label: '结算手机号',
            value: 'reward.agent_mobile',
          },
        ],
      },
      'order.order_sn': {
        type: 'tinput',
        label: '订单号',
        placeholder: '请输入查询内容',
        field: 'order.order_sn',
        value: '',
      },
      'order_item.goods_title': {
        type: 'tinput',
        label: '商品名称',
        placeholder: '请输入查询内容',
        field: 'order_item.goods_title',
        value: '',
      },
      'order.create_time': {
        type: 'tdatetimerange',
        label: '下单时间',
        field: 'order.create_time',
        value: [],
      },
      commission_time: {
        type: 'tdatetimerange',
        label: '分佣时间',
        field: 'commission_time',
        value: [],
      },
      commission_order_status: {
        type: 'tselect',
        label: '订单结算状态',
        field: 'commission_order_status',
        value: '',
        options: {
          data: [
            {
              label: '已扣除',
              value: '-2',
            },
            {
              label: '已取消',
              value: '-1',
            },
            {
              label: '不计入',
              value: '0',
            },
            {
              label: '已计入',
              value: '1',
            },
          ],
        },
      },
      commission_reward_status: {
        type: 'tselect',
        label: '佣金结算状态',
        field: 'commission_reward_status',
        value: '',
        options: {
          data: [
            {
              label: '已退回',
              value: '-2',
            },
            {
              label: '已取消',
              value: '-1',
            },
            {
              label: '未结算',
              value: '0',
            },
            {
              label: '已结算',
              value: '1',
            },
          ],
        },
      },
    },
    data: {
      buyer: { field: 'buyer_id', value: '' },
      agent: { field: 'agent_id', value: '' },
      reward: { field: 'reward.agent_id', value: '' },
      'order.order_sn': '',
      'order_item.goods_title': '',
      'order.create_time': [],
      commission_time: [],
      commission_order_status: '',
      commission_reward_status: '',
    },
    conditionLabel: {},
  });
  const { openFilter, deleteFilter } = useSearch({ filterParams, getData });

  const state = reactive({
    loading: false,
    tableData: [],
    count: {},
  });

  const { pageData } = usePagination();

  async function getData(page) {
    state.loading = true;
    if (page) pageData.page = page;
    let tempSearch = cloneDeep(filterParams.data);
    let search = composeFilter(tempSearch, {
      'buyer.nickname': 'like',
      'buyer.mobile': 'like',
      'agent.nickname': 'like',
      'agent.mobile': 'like',
      'reward.agent_nickname': 'like',
      'reward.agent_mobile': 'like',
      'order.order_sn': 'like',
      'order_item.goods_title': 'like',
      'order.create_time': 'range',
      commission_time: 'range',
    });

    const { error, data } = await api.order.list({
      page: pageData.page,
      list_rows: pageData.list_rows,
      ...search,
    });
    if (error === 0) {
      state.count = data.count;
      state.tableData = data.list.data;
      pageData.page = data.list.current_page;
      pageData.list_rows = data.list.per_page;
      pageData.total = data.list.total;
    }
    state.loading = false;
  }

  function onDetail(id) {
    useModal(
      OrderDetail,
      {
        title: '订单详情',
        type: 'detail',
        id,
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  }

  function onOpenGoodsEdit(id) {
    useModal(GoodsEdit, {
      title: '商品',
      type: 'edit',
      id: id,
    });
  }

  async function onConfirm(params) {
    await api.order.confirm(params);
    getData();
  }

  async function onCancel(params) {
    await api.order.cancel(params);
    getData();
  }

  async function onBack(params) {
    await api.order.back(params);
    getData();
  }

  const commissionPopover = reactive({
    flag: {},
    type: null,
    data: {},
    isDelete: '1',
  });
  async function onConfirmCommissionPopover(id, index) {
    let params = { commission_order_id: id };
    if (commissionPopover.type == 'confirm') {
      onConfirm(params);
    }
    if (commissionPopover.type == 'cancel') {
      params = { ...params, deduct_order_money: commissionPopover.isDelete };
      onCancel(params);
    }
    if (commissionPopover.type == 'back') {
      params = { ...params, deduct_order_money: commissionPopover.isDelete };
      onBack(params);
    }
    onCancelCommissionPopover(id, index);
  }
  function onCancelCommissionPopover(id, index) {
    commissionPopover.flag[index] = false;
    commissionPopover.isDelete = '1';
  }

  const commissionEdit = reactive({
    flag: {},
    commission: '',
  });
  async function onEdit(index, params) {
    const { error } = await api.order.edit(params);
    if (error === 0) {
      getData();
    }
    commissionEdit.flag[index] = false;
    commissionEdit.commission = '';
  }

  function countRewards(row) {
    let commission = 0;
    let commissioned = 0;
    row.forEach((r) => {
      if (r.status == 1) {
        commissioned += Number(r.commission);
      }
      commission += Number(r.commission);
    });

    return `${commission.toFixed(2)}元/${commissioned.toFixed(2)}元`;
  }

  const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    if (columnIndex == 1) {
      return [1, 6];
    } else if (
      columnIndex == 3 ||
      columnIndex == 4 ||
      columnIndex == 5 ||
      columnIndex == 6 ||
      columnIndex == 7
    ) {
      return [0, 0];
    }
  };

  const exportLoading = ref(false);
  async function onExport() {
    exportLoading.value = true;
    let tempSearch = cloneDeep(filterParams.data);
    let search = composeFilter(tempSearch, {
      'buyer.nickname': 'like',
      'buyer.mobile': 'like',
      'agent.nickname': 'like',
      'agent.mobile': 'like',
      'reward.agent_nickname': 'like',
      'reward.agent_mobile': 'like',
      'order.order_sn': 'like',
      'order_item.goods_title': 'like',
      'order.create_time': 'range',
      commission_time: 'range',
    });
    await api.order.export({ search: search.search });
    exportLoading.value = false;
  }
  onMounted(() => {
    getData();
  });
</script>
<style lang="scss" scoped>
  .order-view {
    .dashboard-content {
      padding: 18px 0 2px;
      background: var(--sa-table-header-bg);
      border-radius: 8px;
      .el-col {
        text-align: center;
      }
      .item {
        margin-bottom: 16px;
      }
      .content {
        line-height: 24px;
        font-size: 20px;
        font-weight: 400;
        color: var(--sa-subtitle);
        .unit {
          font-size: 12px;
          margin-left: 4px;
        }
      }
      .label {
        line-height: 16px;
        font-size: 12px;
        font-weight: 400;
        color: var(--sa-font);
      }
    }
    .goods-item {
      .right {
        flex: 1;
        line-height: 14px;
        font-size: 12px;
        font-weight: 400;
        color: var(--sa-font);
        .goods-title {
          height: 14px;
          line-height: 14px;
          font-size: 12px;
          font-weight: 500;
          margin-bottom: 4px;
          .goods-id {
            color: var(--t-color-primary);
            cursor: pointer;
          }
        }
        .goods-sku-text {
          height: 14px;
          line-height: 14px;
          margin-bottom: 10px;
        }
      }
    }
  }

  .sa-table-contnet {
    margin-left: -48px;
    overflow: hidden;
    height: 100%;

    .order-content {
      & > div {
        margin-right: 24px;
        font-size: 12px;
        font-weight: 400;
        color: var(--sa-subtitle);
      }
    }
    .refund-status {
      padding: 4px 12px;
      width: fit-content;
      line-height: 16px;
      font-size: 12px;
      font-weight: 400;
      border-radius: 16px;
      display: inline-block;
      &.refund-status-0 {
        color: #999999;
        background: rgba(153, 153, 153, 0.16);
      }

      &.refund-status-1,
      &.refund-status-2 {
        color: #52c41a;
        background: rgba(82, 196, 26, 0.16);
      }
    }
    .nickname {
      line-height: 14px;
      font-size: 12px;
      font-weight: 500;
      color: var(--el-color-primary);
    }
    .rewards-item {
      cursor: pointer;
      margin-right: 8px;
      &:last-of-type {
        margin-right: 0;
      }
      .commission {
        line-height: 14px;
        font-size: 12px;
        font-weight: 500;
        color: var(--el-color-primary);
      }
    }
  }
  :deep() {
    .sa-table {
      .el-table__header-wrapper {
        margin-bottom: 4px;
      }
      .el-table__row {
        background: var(--sa-background-hex-hover);
      }
      .el-table__expanded-cell {
        padding: 0;
      }
    }
  }
  .sa-expand-table {
    :deep() {
      .el-table__header-wrapper {
        display: none;
        margin-bottom: 0;
      }
      .el-table__row {
        background: var(--el-table-tr-bg-color);
      }
    }
  }
  .rewards-popover {
    & > div {
      line-height: 16px;
      font-size: 12px;
      font-weight: 400;
      color: var(--sa-font);
      margin-bottom: 4px;
    }
    .nickname {
      height: 20px;
      line-height: 20px;
    }
    .id {
      line-height: 16px;
      font-size: 12px;
      font-weight: 400;
      color: var(--sa-subfont);
    }
    .rewards-status {
      height: 16px;
      overflow: hidden;
    }
  }
  .commission-popover {
    .title {
      line-height: 20px;
      font-size: 14px;
      font-weight: 400;
      color: var(--sa-font);
      margin-bottom: 16px;
      .el-icon {
        font-size: 14px;
        color: #faad14;
        margin-right: 8px;
      }
    }
  }
</style>
